<template>
    <div style="width: 100%;height:100%;display:flex;flex-direction: column;">
        <div style="border-left: 5px solid black;padding:10px;width:115px;margin:10px 0;">
            产品参数编辑
        </div>
        <div style="width: 100%;">
            <el-table :data="tableData" style="width: 90%;margin:0 auto;">
                <el-table-column prop="columnIndex" label="字段名" style="display:flex;justify-content: center;"
                    header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.columnComment" placeholder="请输入内容"
                            @input="updateItem(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="columnName" label="属性" style="display:flex;justify-content: center;"
                    header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.columnName" placeholder="请输入内容"
                            @input="updateItem(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位" style="display:flex;justify-content: center;" header-align="center"
                    align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.unit" placeholder="请输入内容" @input="updateItem(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" style="display:flex;justify-content: center;" header-align="center"
                    align="center">
                    <template slot-scope="scope">
                        <el-link :type="scope.row.ordinalPosition == -1 ? 'primary' : 'danger'"
                            @click="doOperation(scope.row)">{{ scope.row.ordinalPosition == -1 ? '新增' : '删除' }}</el-link>
                    </template>

                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>
import request from "../axios/request";
export default {
    data() {
        return {
            tableData: []
        }
    },
    async beforeMount() {
        this.initPage()
    },
    methods: {
        async initPage() {
            let resOfGetProductModelTableColumn = await request({
                url: "/business/api/productModel/getProductModelTableColumn",
                method: "GET"
            });
            this.tableData = resOfGetProductModelTableColumn.data.data
            this.tableData.push({
                columnComment: null,
                ordinalPosition: -1,
                columnName: null,
                unit: null
            })
        },
        async updateItem(item) {
            if (item.ordinalPosition == -1) {
                return;
            }
            await request({
                url: "/business/api/productModel/updateProductModelTableColumn",
                method: "PUT",
                data: item
            });
        },
        async doOperation(item) {
            let resOfDoOperation = null;
            if (item.ordinalPosition == -1) {
                resOfDoOperation = await request({
                    url: "/business/api/productModel/addNewProductModelColumn",
                    method: "POST",
                    data: item
                });
            } else {
                resOfDoOperation = await request({
                    url: "/business/api/productModel/deleteProductModelColumn/" + item.ordinalPosition,
                    method: "DELETE"
                });
            }
            if (resOfDoOperation.data.status == 200) {
this.initPage()
            }
        }
    }
}
</script>

<style scoped></style>